<template>
	<div class="main_container">
		<div class="head_container">
			<div class="head_left">
				<div class="label">员工姓名：</div>
				<el-input v-model="employeeName" placeholder="请输入员工姓名" @input="getList()" />
				<div class="search_btn" @click="getList()">查询</div>
			</div>
			<div class="head_right">
				<div class="add_btn" @click="addHandle('add')">
					<el-icon>
						<Plus />
					</el-icon>
					<span>添加员工</span>
				</div>
			</div>
		</div>

		<div class="table_box">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="name" label="员工姓名" align="center" />
				<el-table-column prop="username" label="账号" align="center" />
				<el-table-column prop="phone" label="手机号" align="center" />
				<el-table-column prop="status" label="账号状态" align="center">
					<template #default="scope">
						<div class="tableColumn-status" :class="{ stop: String(scope.row.status) === '0' }">
							{{ String(scope.row.status) === '0' ? '禁用' : '启用' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="最后操作时间" align="center" />
				<el-table-column prop="status" label="操作" align="center" width="150">
					<template #default="scope">
						<div style="display: flex; justify-content: space-around;align-items:center">
							<el-button type="text" style="color: #41b8ff"
								@click="addHandle(scope.row.id, scope.row.username)">修改</el-button>
							<el-button type="text" size="small" :style="{ color: scope.row.status == '1' ? 'red' : '#1dc779' }"
								@click="statusHandle(scope.row)">{{
									scope.row.status == '1' ? '禁用' : '启用'
								}}</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="pagin_box">
			<el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.pageSize"
				:page-sizes="[10, 20, 50, 100]" :background="false" layout="total, sizes, prev, pager, next, jumper"
				:total="pageParams.total" @size-change="changeSize" @current-change="changePage" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElPagination, ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

import { getEmployeeList, enableOrDisableEmployee } from '/@/api/employee';

let employeeName = ref('');
let tableData = ref([]);
let currentId = ref(null);
let status = ref(null);
let pageParams = ref({
	page: 1,
	pageSize: 10,
	total: 0,
});
const router = useRouter();
onMounted(() => {
	getList();
});

//添加员工
const addHandle = (st: string, username?: string) => {
	if (st === 'add') {
		router.push({ path: '/employee/add' });
	} else {
		if (username === 'admin') {
			return;
		}
		router.push({ path: '/employee/add', query: { id: st } });
	}
};

//修改状态
const statusHandle = (row: any) => {
	if (row.username === 'admin') {
		ElMessage.error('管理员账号不能修改状态');
		return;
	}
	currentId.value = row.id;
	status.value = row.status;
	ElMessageBox.confirm('确认调整该账号的状态?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		enableOrDisableEmployee({ id: currentId.value, status: !status.value ? 1 : 0 })
			.then((res) => {
				if (res.code === 1) {
					ElMessage.success('账号状态更改成功！');
					getList();
				}
			})
			.catch((err) => {
				ElMessage.error('请求出错了：' + err.message);
			});
	});
};

//获取列表数据
const getList = async () => {
	let req = {
		page: pageParams.value.page,
		pageSize: pageParams.value.pageSize,
		name: employeeName.value,
	};
	const res = await getEmployeeList(req);
	if (res.code == 1) {
		tableData.value = res.data.records;
		pageParams.value.total = res.data.total;
	} else {
		tableData.value = [];
		pageParams.value.total = 0;
	}
};

//每页条数
const changeSize = (size: number) => {
	pageParams.value.pageSize = size;
	getList();
};

//翻页
const changePage = (page: number) => {
	pageParams.value.page = page;
	getList();
};
</script>
<style lang="scss" scoped>
@import url("./src/css/employee.scss")
</style>
